<template>
  <div id="tmpl">
      <!-- 实现提交评论数据到服务器的静态结构 -->
      <div id="postcomment">
          <h3>提交评论</h3>
          <p class="p"></p>
          <textarea v-model="postcontent" placeholder="请提交评论"></textarea>
         <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>

          <!-- <mt-button @click="postcomment" type="primary" size="large" >发表</mt-button> -->
      </div>

      <!-- 实现评论列表 -->
      <div id="list">
        <h3>评论列表</h3>
        <p class="p"></p>
        <div v-for="(item,index) in list" :key="index" >
            <div class="title">
                <span>第{{index+1}}楼</span>
                <span>用户:{{item.user_name}}</span>
                <span>发表时间: {{item.add_time | date("YYYY-MM-DD HH:mm:ss")}}</span>
        
            </div>
            <ul class="mui-table-view">
				 <li class="mui-table-view-cell" v-text="item.content"></li>
			</ul>
        </div>
        <mt-button type="danger" plain size="large" @click="more">加载更多</mt-button>

      </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  props: ["id"], //作用接受父组件传入的id值
  data() {
    return {
      list: [],
      postcontent: "",
      pageindex: 1
    };
  },
  created() {
    this.getcommentlist(this.pageindex);
  },
  methods: {
    postcomment() {
      //判断用户是否填写评论内容
      if (this.postcontent.trim().length <= 0) {
        Toast("您要评论的内容不能为空");
        return;
      }
      var url = this.$common.apidomain + "/api/postcomment/" + this.id;
      this.$http
        .post(url, { content: this.postcontent }, { emulateJSON: true })
        .then(res => {
          var data = res.body;
          Toast(data.message);
          this.list.unshift({
            user_name: '匿名用户',
            add_time:new Date,
            content:this.postcontent
          })
          this.postcontent = "";
        });
    },

    //实现获取当前数据的评论数据
    getcommentlist(pageindex = 1) {
      //函数参数 pageindex=1  不传参数默认等于1
      //   pageindex = pageindex || 1;
      //确定评论数据的url
      //es6中的模板字符串 '${变量}常量'
      var url = `${this.$common.apidomain}/api/getcomments/${this.id}?pageindex=${pageindex}`;
   /*    var url =
        this.$common.apidomain +
        "/api/getcomments/" +
        this.id +
        "?pageindex=" +
        pageindex; */
      this.$http.get(url).then(res => {
        if (res.body.status != 0) {
          Toast(res.body.message);
          return;
        }
        //拼接数组
        this.list.push.apply(this.list, res.body.message);
        // this.list = this.list.concat(res.body.message);
        this.postcontent = "";
      });
    },

    //加载更多
    more(pageindex) {
      /* var url = this.$common.apidomain + '/api/getcomments/' + this.id + '?pageindex=' + pageindex;
        this.$http.get(url).then((res)=>{
            if(res.body.status != 0 ){
                Toast(res.body.message)
                return;
            }
            if(res.body.message.length != 0){
                this.list = this.list.concat(res.body.message)
            }
        }) */
      this.pageindex++;
      this.getcommentlist(this.pageindex);
    }
  }
};
</script>
<style scoped>
/* 实现提交评论样式 */
#postcomment {
  padding: 5px;
}
.p {
  height: 1px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
/* 列表样式 */
#list {
  padding: 5px;
}
.title {
  padding: 0 5px;
  color: #6d6d72;
  font-size: 15px;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
